<template>
    <div class="becomeBox">
        <div class="left">
            <div class="title">
                Become a Model
            </div>
            <p>
                To submit your application, please send us the information mentioned below with 4 photos.
            </p>
            <p>
                Please send your application to <span>office@innocencemodels.com</span>
            </p>
            <p>
                If we feel you have the right look for us, we will contact you within 7 days.
            </p>

            <span class="require">Required information for application</span>
            <el-radio-group v-model="radio" class="radio">
                <el-radio value="FEMALE">FEMALE</el-radio>
                <el-radio value="MALE">MALE</el-radio>
                <el-radio value="NON-BINARY">NON-BINARY</el-radio>
            </el-radio-group>

            <div class="options">
                <span>First Name</span>
                <span>Last Name</span>
                <span>Height</span>
                <span>Date of birth</span>
                <span>Shoe size</span>
                <span>Instagram account</span>
                <span>Tik Tok account</span>
                <span>Country</span>
                <span>Email</span>

            </div>

            <div class="lastText">
                *Currently we don’t take applications of talents living outside the EU.
            </div>
        </div>
        <div class="right">
            <img src="../../assets/image/become.png" alt="">
        </div>


    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const radio = ref('')
</script>

<style lang="scss" scoped>
@media (min-width: 768px) and (max-width: 1280px) {}

@media (max-width: 768px) {}


.becomeBox {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
    max-width: 1240px;
    box-sizing: border-box;
    padding: 20px;
    justify-content: center;
    margin: 0 auto;

    .left {
        margin-right: 20px;

        .title {
            font-family: 'Playfair Display';
            font-size: 35px;
            margin-bottom: 30px;
            font-weight: 200;
        }

        p {
            margin-bottom: 30px;
            font-family: 'Playfair Display';
            color: #7f6d86;
            font-size: 12px;
        }

        .require {
            text-transform: uppercase;
            font-family: 'Playfair Display';
            font-size: 16px;
        }

        .radio {
            display: flex;
            flex-direction: column;
            margin-top: 20px;
            align-items: flex-start;
            margin-bottom: 20px;
            // justify-content: flex-start;
        }

        .options {
            display: flex;
            flex-direction: column;

            align-items: flex-start;

            span {
                margin-bottom: 20px;
                font-family: 'Playfair Display';
                color: #7f6d86;
            }
        }

        .lastText{
            color: black;
            font-family: 'Playfair Display';
            font-weight: bold;
            font-size: 14px;
            margin-bottom: 30px;
        }
    }

    .right {

        max-width: 480px;
        overflow: hidden;

        img {
            width: 100%;
        }
    }
}
</style>